<template>
  <div class="user">
    <img :src="user.avatar|dalImg" alt="头像" class="avter" />
    <span>{{ user.nickName ? user.nickName : "匿名" }}</span>
    <router-link class="nav-link" :to="{ name: 'UserPWD' }"
      >修改密码<i class="fa fa-angle-right"></i
    ></router-link>
    <router-link class="nav-link" :to="{ name: 'UserInfo' }"
      >修改个人信息<i class="fa fa-angle-right"></i
    ></router-link>
    <van-button  @click="logOutHandle" type="primary" size="normal">退出登录</van-button>
  </div>
</template>

<script>
import { romoveToken } from "../utils/tools";
import { loadUserInfoAPI, checkInAPI } from "../services/user";
export default {
  name: "User",
  data() {
    return {
      user: {},
    };
  },
  methods: {
    logOutHandle() {
      romoveToken();
      this.$router.replace({
        name: "Home",
      });
    },
    async checkIn() {
      await checkInAPI();
      this. loadUserData()
    },
    async loadUserData() {
      const res = await loadUserInfoAPI();
      this.user = res.data;
    },
  },
   created() {
     this. loadUserData()
  },
};
</script>

<style scoped lang="scss">
.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  span {
    margin: 16px 0;
  }
  .avter {
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
  }
}
.van-button{
    margin-top: 40px;
}
.nav-link {
  width: 80%;
  border: 1px solid gainsboro;
  padding: 4px 8px;
  margin-bottom: 15px;
  i {
    float: right;
  }
}
</style>